import React from 'react'
import { Modal, Button, Form, Input } from 'antd'

const FormItem = Form.Item

const DistributorForm = ({
                     onOk, item, form: {
    getFieldDecorator,
    validateFields,
    getFieldValue
  }, ...modalProps
                   }) => {
  const formItemLayout = {
    labelCol: {
      xs: {span: 8, offset: 0},
      sm: {span: 8, offset: 0},
    },
    wrapperCol: {
      xs: {span: 12, offset: 0},
      sm: {span: 12, offset: 0},
    },
  }

  const onSubmit = (e) => {
    e.preventDefault()
    validateFields((err, values) => {
      if (!err) {
        onOk(values)
      }
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: onSubmit,
  }

  /** @namespace item.name 账户名称*/
  /** @namespace item.financialAccountBankName 开户银行*/
  /** @namespace item.financialAccountBranch 支行*/
  /** @namespace item.bankAccount 开户账号*/
  /** @namespace item.financialAccountBankUserName 开户名*/
  /** @namespace item.creditLine */
  /** @namespace item.paymentRatio */
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <FormItem {...formItemLayout} hasFeedback label="户名">
          {getFieldDecorator('name', {
            rules: [{required: true, message: '户名必须填写!'}],
            initialValue: item.name,
          })(<Input/>)}
        </FormItem>

        <FormItem {...formItemLayout} hasFeedback label="开户银行">
          {getFieldDecorator('bankName', {
            rules: [{required: true, message: '开户银行必须填写!'}],
            initialValue: item.financialAccountBankName,
          })(<Input/>)}
        </FormItem>

        <FormItem {...formItemLayout} hasFeedback label="支行">
          {getFieldDecorator('branch', {
            rules: [{required: true, message: '支行必须填写!'}],
            initialValue: item.financialAccountBranch,
          })(<Input/>)}
        </FormItem>

        <FormItem {...formItemLayout} hasFeedback label="开户账号">
          {getFieldDecorator('bankAccount', {
            rules: [{required: true, message: '开户账号必须填写!'}],
            initialValue: item.bankAccount,
          })(<Input/>)}
        </FormItem>

        <FormItem {...formItemLayout} hasFeedback label="开户名">
          {getFieldDecorator('bankUserName', {
            rules: [{required: true, message: '开户名必须填写!'}],
            initialValue: item.financialAccountBankUserName,
          })(<Input/>)}
        </FormItem>

        <FormItem {...formItemLayout} hasFeedback label="信贷额度">
          {getFieldDecorator('creditLine', {
            rules: [{required: true, message: '信贷额度必须填写!'}, {type: 'integer'}],
            initialValue: item.creditLine || 0,
          })(<Input/>)}
        </FormItem>

        <FormItem {...formItemLayout} hasFeedback label="付款比例">
          {getFieldDecorator('paymentRatio', {
            validateTrigger: 'onBlur',
            rules: [{required: true, message: '付款比例必须填写!'}, {
              validator: (rule, value, callback) => {
                value = Number(value)

                if (value > 100) {
                  callback('付款比例不能大于100%')
                } else if (value < 60) {
                  callback('付款比例不能小于60%')
                }
                callback()
              }
            }],
            initialValue: item.paymentRatio || 100,
          })(<Input/>)}
        </FormItem>

        <FormItem {...formItemLayout} hasFeedback label="门店签约人">
          {getFieldDecorator('distributorSigner', {
            rules: [
              {required: true, message: '门店签约人必须填写!'},
              {type: 'email', message: '必须填写有效的Email!'}
            ],
            initialValue: item.distributorSigner,
          })(<Input/>)}
        </FormItem>

        <FormItem {...formItemLayout} style={{marginBottom: 0}} label="门店编码">
          {getFieldDecorator('code', {
            rules: [{required: true, message: '编码必须填写!'}, {pattern: '^[A-Z]{5}[0-9]{2}$', message: '编码必须是5位大写字母+2位数字'}],
            initialValue: item.code,
          })(<Input placeholder='5位大写字母+2位数字'/>)}
          {(<p style={{width: 200, marginBottom: 0}}>注：此编码将作为合同号前7位</p>)}
        </FormItem>

        <FormItem {...formItemLayout}>
          {getFieldDecorator('version', {
            initialValue: item.version || 0,
          })(<Input type='hidden'/>)}
        </FormItem>

      </Form>
    </Modal>
  )
}

export default Form.create()(DistributorForm)
